<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			.ul_box {
				margin: 0 auto;
				height: 500px;
				width: 500px;
				border: 1px solid #909090;
				position: relative;
				overflow: hidden;
			}
			
			ul {
				position: absolute;
				bottom: 0;
				left: 0;
			}
			
			li {
				list-style: none;
			}
		</style>
	</head>

	<body>
		<div class="ul_box">
			<ul>
				<li>001</li>
			</ul>
		</div>
		<script type="text/javascript">
			var info = [{
					name: "胡杭",
					age: 16
				},
				{
					name: "胜明",
					age: 22
				},
				{
					name: "军毅",
					age: 21
				},
				{
					name: "晓华",
					age: 13
				},
				{
					name: "盛聪",
					age: 23
				},
				{
					name: "侦剑",
					age: 32
				},
				{
					name: "红翔",
					age: 25
				},
				{
					name: "超维",
					age: 18
				},
				{
					name: "士琪",
					age: 22
				},
				{
					name: "艳华",
					age: 20
				}
			];
			var ul = document.querySelector("ul"),
				lis = document.querySelectorAll("li");
			var btn = document.querySelector("button"),
				sum = 0;

			setInterval(function() {
				a = Math.floor(Math.random() * 10);
				sum++;
				var new_li = document.createElement("li"),
					lis = document.querySelectorAll("li");				
				ul.appendChild(new_li); //添加新节点
				new_li.innerText = info[a].name + info[a].age;
				if(sum>10) {				
                    ul.removeChild(lis[0]);
				}				
			}, 1000);
			alert("不知道要怎么弄把第一个衔接到底部，只想到删除第一个")
		</script>
	</body>

</html>